<html>
<style>
div {
	display:flex;
	flex-direction: column;
	float:left;
	width: 80px;
	height: 80px;
	border: 1px solid #ddd;
	justify-content:center;
	text-align:center;
	align-items:center;
	font-size: 12px;
	color: #aa0000;
}
</style>
<script type="text/javascript" charset="utf-8" src="./wiles5.js"></script>
<script type="text/javascript" charset="utf-8">
var wil = new Wil()
var xhr = new XMLHttpRequest();
xhr.open('GET', './data/Items.wil', true);
xhr.responseType = 'arraybuffer';
xhr.onload = function(e) {
    wil.readWil(xhr.response);
    var xhr2 = new XMLHttpRequest();
	xhr2.open('GET', './data/Items.wix', true);
	xhr2.responseType = 'arraybuffer';
	xhr2.onload = function(e2) {
		wil.readWix(xhr2.response);
		for (var i = 0; i < wil.getCount(); i++) {
			var info = wil.getInfo(i);
			var img = wil.getImage(i);
			var div = document.createElement("div");
			div.innerHTML = i + "<br>";
			div.appendChild(img);
			document.body.appendChild(div);
		}
	};
	xhr2.send();
};
xhr.send();
</script>
<body>
</body>